<template>
    <div class="gzzs">
        <img
            src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/index_sb_img/sphappyindexbj.png"
            class="banner"
            alt=""
        />
        <div class="main">
            <div class="left">
                <img
                    v-show="$route.params.page == 'index'"
                    src="~/assets/images/happyPost/index-title.png"
                    class="menu-title"
                    alt=""
                />
                <img
                    v-show="$route.params.page == 'my'"
                    src="~/assets/images/happyPost/my-title.png"
                    class="menu-title"
                    alt=""
                />
                <img
                    v-show="$route.params.page == 'news'"
                    src="~/assets/images/happyPost/new-title.png"
                    class="menu-title"
                    alt=""
                />
                <nuxt-link
                    to="/happlypost/page/index"
                    class="menu-item"
                    :class="{ active: $route.params.page == 'index' }"
                    >热门推荐</nuxt-link
                >
                <nuxt-link
                    to="/happlypost/page/my"
                    class="menu-item"
                    :class="{ active: $route.params.page == 'my' }"
                    >我的</nuxt-link
                >
                <nuxt-link
                    to="/happlypost/page/news"
                    class="menu-item"
                    :class="{ active: $route.params.page == 'news' }"
                    >我的消息</nuxt-link
                >
            </div>
            <div class="right">
                <div :is="'page' + $route.params.page"></div>
            </div>
        </div>
    </div>
</template>

<script>
import pageindex from "@/components/happlypost/index";
import pagemy from "@/components/happlypost/my";
import pagenews from "@/components/happlypost/news";
export default {
    components: {
        pageindex,
        pagemy,
        pagenews,
    },
    async asyncData({ params }) {
        let data = {};
        return data;
    },
    layout: "home",
    head() {
        return {
            title: "会计知识专业问答-财税会计知识问答-小竹财税官网",
            meta: [
                {
                    hid: "description",
                    name: "description",
                    content:
                        "小竹财税小竹财税汇集税收法规、会计法规、财税资讯、财税学院、财税工具、财税企服等版块，打造一站式财税服务平台，让天下没有难懂的财税。",
                },
                {
                    hid: "keywords",
                    name: "keywords",
                    content:
                        "税收法规,会计法规,财税资讯,财税学院,财税工具,财税企服",
                },
            ],
        };
    },
    data() {
        return {};
    },
    beforeMount() {},
    created() {},
    mounted() {},
    computed: {},
    watch: {},
    methods: {
        go(path) {
            if (!path) {
                this.$alert("敬请期待", "提示", {
                    confirmButtonText: "确定",
                });
                return;
            }
            this.$router.push({
                path: path,
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.gzzs {
    width: 1200px;
    margin: 0 auto;
}

.banner {
    width: 100%;
    height: auto;
}

.main {
    display: flex;
    justify-content: space-between;
    .left {
        width: 176px;
        background: #ffffff;
        padding-top: 30px;
        padding-bottom: 200px;
        .menu-title {
            display: block;
            margin: 0 auto 36px;
        }
        .menu-item {
            display: block;
            margin: 0 auto 16px;
            width: 120px;
            height: 43px;
            line-height: 43px;
            text-align: center;
            background: #ffffff;
            box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1);
            border-radius: 5px;
            font-weight: 400;
            font-size: 20px;
            color: #333333;
        }
        .active {
            background: #026beb !important;
            color: #ffffff !important;
        }
    }
    .right {
        width: 1017px;
    }
}
</style>